<template>
  <zm-view ref="view">
    <image class="header-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/mall-header-bg.png')" mode="scaleToFill" />
    <zm-navbar :border-bottom="false" background="transparent" :title="orderInfo.showStatusName"> </zm-navbar>
    <view class="content-wrap">
      <!-- 待支付 -->
      <view v-if="orderInfo.showStatus == 0" class="flex flex-1 flex-col items-center">
        <view class="flex font-26 text-center py-40">
          <text>请尽快完成付款，还剩</text>
          <u-count-down :time="orderInfo.autoTime * 1000" auto-start format="mm分ss秒" @finish="handleGetInfo"></u-count-down>
        </view>
        <view class="flex justify-between w-full mb-36 px-60">
          <zm-button round block plain type="default" color="transparent" border-color="#333333" height="62rpx" font-size="26rpx">取消订单</zm-button>
          <zm-button round block type="default" height="62rpx" font-size="26rpx" custom-class="ml-36">立即付款</zm-button>
        </view>
      </view>
      <view v-if="orderInfo.showStatus == 3" class="text-center font-26 py-40">订单超时，已自动关闭</view>
      <view v-if="orderInfo.showStatus == 4" class="text-center font-26 py-40">{{ orderInfo.goodsInfo.exchangeTime ? "商品已兑换" : "商品购买成功，等待兑换" }} </view>
      <view v-if="orderInfo.showStatus == 5" class="text-center font-26 py-40">系统正在为您自动退款，预计1-3个工作日原路退回</view>
      <view v-if="orderInfo.showStatus == 6" class="text-center font-26 py-40">{{ orderInfo.goodsInfo.backMoneyTime }} 完成退款</view>

      <!-- 卡片信息 -->
      <view class="flex flex-col mt-20">
        <view class="adddress-wrap flex items-center px-24 pt-30 pb-42 radius-tl-16 radius-tr-16 relative">
          <image class="address-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/address-bg.png')" mode="scaleToFill" />
          <view class="flex items-center mr-24 flex-1" @click="handleToCinema">
            <text class="text-666 font-28 font-bold mr-8 text-row-1">{{ orderInfo.cinemaInfo.cinemaName }}</text>
            <zm-icon name="arrow" color="#666666" weight="bold"></zm-icon>
          </view>
          <view class="flex z-2">
            <zm-icon name="location" size="32rpx" @click="handleMapNavigation"></zm-icon>
            <zm-icon name="phone" size="32rpx" custom-class="ml-56" @click="handleCall"></zm-icon>
          </view>
        </view>
        <view class="goods-wrap" :class="{ 'goods-wrap--qrcode': isShowQrcode }">
          <view class="flex z-2 pb-46">
            <u-image width="140rpx" height="140rpx" radius="12rpx" mode="scaleToFill" :src="orderInfo.goodsInfo.imageList[0]"></u-image>
            <view class="flex flex-col ml-20 flex-1 justify-around">
              <text class="font-30 font-bold text-row-1">{{ orderInfo.goodsInfo.goodsName }}</text>
              <text class="text-666">{{ orderInfo.goodsSum }}份</text>
              <text class="text-666">有效期：至{{ orderInfo.goodsInfo.endTime | formatDate }}</text>
            </view>
          </view>
        </view>
        <view v-if="isShowQrcode" class="qrcode-wrap">
          <view class="line"></view>
          <view class="flex flex-col flex-1 z-2">
            <text class="font-32 font-bold">取货二维码</text>
            <view class="flex flex-col flex-1 items-center mt-12" :class="{ 'opacity-4': isInvalid }">
              <view class="swiper-wrap">
                <swiper class="swiper w-full" @change="onSwiperChange">
                  <swiper-item v-for="(item, index) in orderInfo.list" :key="index" class="flex justify-center w-full">
                    <view class="flex relative">
                      <zm-qrcode ref="qrcode" :value="item.qrCode" :size="244"></zm-qrcode>
                      <view class="badge-wrap">
                        <status-badge v-if="orderInfo.showStatus == 6" type="3">已退款</status-badge>
                        <status-badge v-if="orderInfo.showStatus == 4 && orderInfo.goodsInfo.exchangeTime" type="1">已兑换</status-badge>
                      </view>
                    </view>
                  </swiper-item>
                </swiper>
              </view>
              <view class="indicator-wrap" :style="[indicatorStyle]">
                <view class="indicator-line" :style="[indicatorLineStyle]"></view>
              </view>
              <text class="text-666 text-center mt-4">{{ orderInfo.list.length }}个取货码</text>
              <view v-if="orderInfo.list.length" class="code-btn mt-36" :class="{ 'text-line-through': isInvalid }" @click="useCopy(orderInfo.list[swiperIndex].qrCode)">
                取货码 {{ orderInfo.list[swiperIndex].qrCode }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="p-24 mt-20 bg-white radius-12">
        <view class="flex flex-1 justify-between">
          <text class="font-32 font-bold">订单信息</text>
          <zm-icon-text
            custom-class="click-animation"
            name="arrow"
            text="金额明细"
            text-left
            size="26rpx"
            color="#666666"
            text-color="#666666"
            text-size="26rpx"
            @click="handleClickPriceDetail"
          ></zm-icon-text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">订单金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.goodsInfo.asPrice | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">实付金额：</text>
          <text class="text-price-before ml-10">{{ orderInfo.goodsInfo.surplusPrice | formatDigit({ trimZero: false }) }}</text>
        </view>
        <view class="flex font-26 mt-20 items-center">
          <text class="text-666">订单号码：</text>
          <text class="ml-10">{{ orderInfo.goodsInfo.orderNo }}</text>
          <view class="copy-btn" @click="useCopy(orderInfo.goodsInfo.orderNo)">复制</view>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">订单时间：</text>
          <text class="ml-10">{{ orderInfo.goodsInfo.orderTime }}</text>
        </view>
        <view class="flex font-26 mt-20">
          <text class="text-666">手机号码：</text>
          <text class="ml-10">{{ orderInfo.goodsInfo.lockMobile }}</text>
        </view>
      </view>
    </view>
    <zm-popup :show.sync="showDetalPopup" mode="bottom" height="500rpx" max-height="500rpx" border-radius="16rpx" closeable safe-area-inset-bottom>
      <view slot="header" class="flex justify-center p-24 font-32">金额明细</view>
      <view class="p-24">
        <view v-for="(item, index) in orderInfo.otherPayInfo" :key="index" class="flex items-center justify-between font-26">
          <text class="text-666">{{ item.name }}</text>
          <text>{{ item.value }}</text>
        </view>
      </view>
      <view slot="footer" class="p-24">
        <zm-button size="medium" round @click="showDetalPopup = false">确定</zm-button>
      </view>
    </zm-popup>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
export default {
  mixins: [page, hook],
  data() {
    return {
      tt: "123123123",
      orderId: "",
      orderInfo: { cinemaInfo: {}, goodsInfo: { imageList: [] }, list: [] },
      showDetalPopup: false,
      swiperIndex: 0
    }
  },
  computed: {
    isShowQrcode() {
      const codes = ["4", "6"]
      return codes.includes(this.orderInfo.showStatus)
    },
    isInvalid() {
      const codes = ["6"]
      return codes.includes(this.orderInfo.showStatus)
    },
    indicatorStyle() {
      const style = {}
      style.width = 28 * 6 + "rpx"
      return style
    },
    indicatorLineStyle() {
      const style = {}
      style.transform = `translateX(${this.swiperIndex * 28}rpx)`
      return style
    }
  },
  onLoad(options) {
    this.orderId = options.orderId
    this.handleGetInfo()
  },
  methods: {
    handleGetInfo() {
      uni.$api.goods.getOrderInfo({ orderId: this.orderId }).then((res) => {
        this.orderInfo = res
        uni.setNavigationBarTitle({ title: this.orderInfo.showStatusName })
      })
    },
    onSwiperChange({ detail }) {
      this.swiperIndex = detail.current
    },
    handleClickPriceDetail() {
      this.showDetalPopup = true
    },
    handleToCinema() {
      this.toView({
        url: "pages/cinema/cinema-schedule/cinema-schedule",
        params: {
          cinemaId: this.orderInfo.cinemaInfo.cinemaId
        }
      })
    },
    handleMapNavigation() {
      uni.openLocation({
        latitude: Number(this.orderInfo.cinemaInfo.latitude),
        longitude: Number(this.orderInfo.cinemaInfo.longitude),
        success: () => {},
        fail: (err) => {
          uni.$toast(err.errMsg)
        }
      })
    },
    handleCall() {
      if (this.orderInfo.cinemaInfo.serviceTel) {
        uni.makePhoneCall({
          phoneNumber: this.orderInfo.cinemaInfo.serviceTel
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.header-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 436rpx;
  position: fixed;
}

.content-wrap {
  padding: 24rpx;
  padding-top: 0;
  position: relative;
  .adddress-wrap {
    background: linear-gradient(94deg, #ffffff 0%, #f4f8fc 100%);
    .address-bg {
      top: 0;
      right: 0;
      width: 283rpx;
      z-index: 1;
      height: 100rpx;
      position: absolute;
    }
  }

  .goods-wrap {
    display: flex;
    padding: 20rpx;
    overflow: hidden;
    margin-top: -16rpx;
    position: relative;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(208, 208, 208, 0.16);
    &:not(.goods-wrap--qrcode) {
      border-radius: 16rpx;
      background-color: #fff;
    }
    &--qrcode {
      &::before,
      &::after {
        top: 0;
        width: 50%;
        bottom: 0;
        content: "";
        position: absolute;
        pointer-events: none;
      }
      &::before {
        left: 0;
        background-image: radial-gradient(circle at left bottom, transparent 25rpx, #fff 25rpx);
      }
      &::after {
        right: 0;
        background-image: radial-gradient(circle at right bottom, transparent 25rpx, #fff 25rpx);
      }
    }
  }
  .qrcode-wrap {
    display: flex;
    padding: 30rpx 24rpx;
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    &::before,
    &::after {
      top: 0;
      width: 50%;
      bottom: 0;
      content: "";
      position: absolute;
      pointer-events: none;
    }
    &::before {
      left: 0;
      background-image: radial-gradient(circle at left top, transparent 25rpx, #fff 25rpx);
    }
    &::after {
      right: 0;
      background-image: radial-gradient(circle at right top, transparent 25rpx, #fff 25rpx);
    }
    .line {
      top: 0;
      left: 25rpx;
      right: 25rpx;
      z-index: 3;
      position: absolute;
      border-top: 5rpx dashed #eeeeee;
    }
    .swiper-wrap {
      width: 100%;
      height: 244rpx;
      .swiper {
        height: 290rpx !important;
      }
    }

    .badge-wrap {
      top: 130rpx;
      right: -45%;
      opacity: 1;
      position: absolute;
    }

    .indicator-wrap {
      height: 6rpx;
      display: flex;
      overflow: hidden;
      margin: 20rpx auto;
      border-radius: 3rpx;
      background-color: var(--page-color);
      .indicator-line {
        width: 28rpx;
        height: 6rpx;
        overflow: hidden;
        border-radius: 3rpx;
        transition: all 0.3s ease;
        background-color: var(--theme-color);
      }
    }
    .code-btn {
      gap: 12rpx;
      display: grid;
      font-size: 30rpx;
      font-weight: bold;
      margin-top: 25rpx;
      padding: 24rpx 46rpx;
      text-align: center;
      border-radius: 12rpx;
      background-color: #f4f6f7;
    }
  }
  .copy-btn {
    width: 56rpx;
    height: 30rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    justify-content: center;
    border: 2rpx solid #cccccc;
    font-size: 22rpx;
    color: #999999;
    margin-left: 14rpx;
  }
}
</style>
